<template>
  <div
    id="echartMapContent"
    style="height: 100%"
  />
</template>

<script>
import echarts from 'echarts'
require('echarts/map/js/china')
export default {
  name: 'EchartsMapCom',

  watch: {
    stations () {
      this.createMapChart()
    },
    maplines () {
      this.createMapChart()
    }
  },

  computed: {
    // 地球站列表，echarts绘制地图用
    stations () {
      return this.$store.state.station.stationList.map(item => {
        return {
          name: item.name,
          state: item.state,
          value: [item.longitude, item.latitude, this.$t(`message.define.cu.state.${item.state}`)]
        }
      })
    },
    maplines () {
      return this.$store.state.station.stationMapLine
    }
  },

  data () {
    return {
      mapChart: null
    }
  },

  mounted () {
    let self = this
    self.$nextTick(async () => {
      self.$store.dispatch(`getStationList`)
      self.$store.dispatch(`getUsingTrafficChannel`)
      self.$store.dispatch(`getUsingSubscribeFreqSegment`)
    })
  },

  methods: {
    // 地图
    createMapChart () {
      let self = this
      if (self.mapChart === null) {
        self.mapChart = echarts.init(document.getElementById('echartMapContent'))
      }
      self.mapChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            let data = params.data
            return `${self.$t('message.home.mapCard.maptip.tip1')}: ${data.name}
                    <br />
                    ${self.$t('message.home.mapCard.maptip.tip2')}: ${data.value[0]},${data.value[1]}
                    <br />
                    ${self.$t('message.home.mapCard.maptip.tip3')}: ${data.value[2]}`
          }
        },
        legend: {
          show: true,
          right: 0,
          bottom: 0,
          orient: 'vertical'
        },
        geo: {
          map: 'china',
          // zoom: 1.2,
          aspectScale: 1,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true,
          // scaleLimit: {
          //   min: 1.2
          // },
          itemStyle: {
            normal: {
              areaColor: '#4e6d9d',
              borderColor: '#658da9',
              borderWidth: 1
            },
            emphasis: {
              areaColor: '#4e6d9d',
              borderColor: '#658da9',
              borderWidth: 1
            }
          }
        },
        series: [
          {
            name: this.$t('message.define.cu.state.2'),
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              scale: 3,
              brushType: 'stroke'
            },
            itemStyle: {
              color: '#00c6ff'
            },
            label: {
              show: true,
              position: 'right',
              offset: [5, 0],
              fontSize: 14,
              fontWeight: 'bold',
              formatter: '{b}',
              padding: 5,
              color: '#fff',
              backgroundColor: 'rgba(0, 0, 0, 0.35)'
            },
            data: self.stations.filter(item => item.state === 2),
            z: 5
          },
          {
            name: this.$t('message.define.cu.state.2'),
            type: 'lines',
            lineStyle: {
              color: '#00c6ff',
              width: 2,
              curveness: 0.3
            },
            progressive: 0,
            silent: true,
            animation: false,
            data: self.maplines,
            z: 4
          },
          {
            name: this.$t('message.define.cu.state.1'),
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#5d88c1',
              borderColor: '#648fc8',
              borderWidth: 1,
              shadowColor: 'rgba(0, 198, 255, 0.8)',
              shadowBlur: 4
            },
            label: {
              show: true,
              position: 'right',
              offset: [5, 0],
              fontSize: 14,
              fontWeight: 'bold',
              formatter: '{b}',
              padding: 5,
              color: '#fff',
              backgroundColor: 'rgba(0, 0, 0, 0.35)'
            },
            data: self.stations.filter(item => item.state === 1),
            z: 3
          },
          {
            name: this.$t('message.define.cu.state.0'),
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#d2d2d2'
            },
            label: {
              show: true,
              position: 'right',
              offset: [5, 0],
              fontSize: 14,
              fontWeight: 'bold',
              formatter: '{b}',
              padding: 5,
              color: '#fff',
              backgroundColor: 'rgba(0, 0, 0, 0.35)'
            },
            data: self.stations.filter(item => item.state === 0),
            z: 2
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
